<template>
    <div class="iframe">
        <div class="i-title">
            <h3>我的购物车</h3>
        </div>
        <div class="i-tip">
            <div class="item header">
                <span>商品名称</span>
                <span>价格</span>
                <span>数量</span>
                <span>操作</span>
            </div>
            <div class="item" v-for="item, index in cars" :key="index">
                <span>{{ item.name }}</span>
                <span>{{ item.price }}</span>
                <el-input type="number" class="w-50" min="1" max="10" v-model="item.num" />
                <span @click="del(index)">删除</span>
            </div>
            <div class="item">
                <span>总计：</span>
                <span></span>
                <span>{{ comp.intNum }}</span>
                <span>{{ comp.intTotal }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, reactive } from 'vue';
let cars = reactive([{
    name: "手机",
    price: 1000,
    num: 1
},
{
    name: "图片",
    price: 100,
    num: 1
},
{
    name: "电脑",
    price: 2000,
    num: 1
}
]);
function del(i) {
    cars.splice(i, 1)
}
let comp = computed(() => {
    let intNum = 0,
        intTotal = 0;
    cars.forEach(item => {
        intNum += parseInt(item.num);
        intTotal += parseInt(item.num) * item.price;
    })
    return {
        intNum,
        intTotal
    }
})
</script>

<style scoped>
.w-50 {
    width: 80px;
}

.item {
    display: flex;
    width: 400px;
    padding: 8px 0;
    justify-content: space-around;
    border: solid 1px #ccc;
    margin-top: -1px;
}

.item span,
.item input {
    width: 100px;
    text-align: center;
}

.header {
    background-color: #eee;
    font-weight: 700;
}
</style>


